<template>
  <div>
    <el-dialog
      :destroy-on-close="true"
      :visible.sync="dialogFormVisible"
      @closed="handleCancel"
      title="添加任务"
      :fullscreen="isPhone"
      class="job-dialog"
    >
      <div class="job-form-box">
        <el-form class="job-form" :model="form" :rules="rules"  :inline-message="true" ref="jobForm" status-icon>
          <!--        任务名-->
          <el-form-item :label-width="formLabelWidth" label="任务名称" prop="name" >
            <el-input
              autocomplete="off"
              clearable
              maxlength="30"
              prefix-icon="el-icon-s-management"
              show-word-limit
              v-model="form.name"
              style="width:80%"
            ></el-input>
          </el-form-item>


          <el-form-item :label-width="formLabelWidth" label="过期时间" prop="expire">
            <el-date-picker
              :editable="false"
              :picker-options="pickerOptions"
              @change="handleExpireChange"
              align="center"
              placeholder="选择日期和时间"
              type="datetime"
              v-model="form.expire"
            >
            </el-date-picker>
          </el-form-item>

          <!--      分组-->
          <el-form-item :label-width="formLabelWidth" label="所属组" prop="classify" size="small">
            <el-radio-group size="medium" v-model="form.classify">
              <el-radio-button :key="index" :label="item.id" v-for="(item,index) in classIfyList">
                {{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="收藏" prop="collect">
            <el-switch
              active-color="teal"
              active-text="♥️"
              inactive-color="gray"
              v-model="form.collect">
            </el-switch>
          </el-form-item>
          <!--        备注内容-->
          <el-form-item :label-width="formLabelWidth" label="备注" prop="note" >
            <el-input
              :autosize="{ minRows: 2, maxRows: 4}"
              clearable
              maxlength="50"
              placeholder="请输入内容"
              prefix-icon="el-icon-notebook-2"
              show-word-limit
              type="textarea"
              style="width: 80%"
              v-model="form.note">
            </el-input>
          </el-form-item>

          <div style="width: 100%" class="flex-center-row">
            <el-button @click="submitJob" type="primary" :loading="submitLoading">确 定</el-button>
            <el-button @click="handleCancel">取 消</el-button>
          </div>
        </el-form>

      </div>

<!--      <div class="dialog-footer" slot="footer">-->
<!--       -->
<!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
  import {jobApi} from "../../assets/api/jobApi";
  import {isPhone} from "../../util/common";

  export default {
    name: "JobForm",
    props: {
      show: Boolean
    },
    data() {
      return {
        isPhone:isPhone(),
        formLabelWidth: '120px',
        dialogFormVisible: false,
        submitLoading:false,
        // 分组
        classIfyList: [
          {
            id: 0,
            name: "大数据"
          }
        ],

        // 需要提交的数据
        form: {
          name: '',
          collect: false,
          expire: "",
          classify: 0,
          note: "",
        },
        // 表单验证规则
        rules: {
          name: [
            {required: true, message: "请输入任务名称", trigger: 'blur'},
            {max: 30, min: 1, message: "名称长度 1 ~ 30", trigger: ['blur','change']}
          ],
          expire: [
            {type: 'date', required: true, message: "请输入选择过期时间", trigger: 'blur'},
          ],
          note: [
            {required: true, message: "请输入备注", trigger: 'blur'},
            {max: 50, min:1, message: "备注长度 1 ~ 50", trigger:['blur','change']}
          ]
        },
        // 日期选择器配置项
        pickerOptions: {
          shortcuts: [{
            text: '明天',
            onClick(picker) {
              picker.$emit('pick', new Date() + 3600 * 1000 * 24);
            }
          }, {
            text: '三天后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 3);
              picker.$emit('pick', date);
            }
          }, {
            text: '五天后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 5);
              picker.$emit('pick', date);
            }
          }, {
            text: '七天后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          },
            {
              text: '30天后',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
                picker.$emit('pick', date);
              }
            }]
        },
      };
    },
    methods: {

      handleExpireChange(value) {

        let duration = new Date().getTime() - value.getTime()
        if (duration >= 0) {
          this.$message({
            message: '请选择未来日期',
            type: 'error'
          });
          this.form.expire = ""
        }
      },
      resetForm() {
        this.form = {
          name: '',
          collect: false,
          expire: "",
          classify: 0,
          note: "",
        }
        this.submitLoading=false
      },
      handleCancel() {
        this.dialogFormVisible = false
        this.$emit("closeJobForm", this.dialogFormVisible)
        this.resetForm()
      },
      submitJob() {
        // 校验信息
        this.$refs["jobForm"].validate((valid) => {
          // 校验成功
          if (valid) {
            // 禁止提交按钮 ,防止重复提交
            this.submitLoading=true
            // 提交job
            jobApi.insertOneJob(this.form).then(resp=>{
              // 状态码正确
              if(resp.code===200){

                  // 发出提交成功信息
                this.$message({
                  type:'success',
                  message:"添加成功"
                })

                this.$emit("submitJob",true)
                // 关闭窗口
                this.handleCancel()
              }else{

                // 状态码不正确
                this.$message({
                  type:'error',
                  message:"添加失败"
                })
                // 重置表单
                this.resetForm()
              }
            })

          } else {

            return false;
          }
        });

      }
    },
    watch: {
      show: function (newV) {
        this.dialogFormVisible = newV
      }

    }
  }
</script>

<style scoped lang="less">
  .job-dialog{

    .job-form-box{
      width: 90%;

      .job-form{
        width: 100%;
        height: 100%;
      }

    }
  }

</style>
